<template>
    <a-modal
            title="新增供应商员工"
            :width="760"
            :visible="visible"
            :confirmLoading="loading"
            @ok="() => { $emit('cancel') }"
            @cancel="() => { $emit('cancel') }"
    >
        <a-spin :spinning="loading" style="padding:15px 25px;">
            <a-form :form="form" v-bind="formLayout">
                <a-row class="form-row" :gutter="48">
                    <div v-for="(v, k) in fields" :key="k">
                        <a-col :lg="12" :md="12" :sm="24">
                          <a-form-item :label="v.label">
                            <template>
                              <span>{{v.customRender? v.customRender(model[v.key]) : model[v.key]}}</span>
                            </template>
                          </a-form-item>
                        </a-col>
                    </div>
                </a-row>
            </a-form>
          <s-table
            ref="table"
            size="default"
            rowKey="key"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :rowSelection="rowSelection"
            showPagination="auto">
                <span slot="serial" slot-scope="text, record, index">
                  {{ index + 1 }}
                </span>
            <span slot="action" slot-scope="text, record">
                  <template>
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="handleSub(record)">删除</a>
                  </template>
                </span>
          </s-table>
        </a-spin>
    </a-modal>
</template>

<script>
    import pick from 'lodash.pick'
    import { _get } from '@/api/DrivingRecord'
    import moment from 'moment'
    import { STable } from '@/components'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')
    // 表单字段
    const fields = [
    ]

    export default {
        components: {
          STable
        },
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            model: {
                type: Object,
                default: () => null
            }
        },
        data () {
            this.formLayout = {
            }
            return {
                moment,
                form: this.$form.createForm(this),
                fields: fields,
                loading: false,
                selectList: {
                },
              columns: [
                {
                  title: 'Id',
                  dataIndex: 'idDriRec'
                },
                {
                  title: '車牌',
                  dataIndex: 'licensePlate'
                },
                {
                  title: '司機名稱',
                  dataIndex: 'driverName'
                },
                {
                  title: '地點',
                  dataIndex: 'fromAdd'
                },
                {
                  title: '圖片',
                  dataIndex: 'pictureUrl'
                },
                {
                  title: '事項',
                  dataIndex: 'job'
                }
              ],
              // 高级搜索 展开/关闭
              advanced: false,
              // 查询参数
              queryParam: {},
              // 加载数据方法 必须为 Promise 对象
              loadData: parameter => {
                const requestParameters = Object.assign({ draw: 1 }, parameter, this.queryParam)
                console.log('loadData request parameters:', requestParameters)
                return _get(requestParameters)
                  .then(res => {
                    const result = res.data
                    const results = {
                      pageSize: requestParameters.pageSize,
                      pageNo: requestParameters.pageNo,
                      totalCount: result.recordsTotal,
                      totalPage: 4,
                      data: result.data
                    }
                    console.log(results)
                    return results
                  })
              },
              selectedRowKeys: [],
              selectedRows: []
            }
        },
        created () {
            // 防止表单未注册
            fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
            // 当 model 发生改变时，为表单设置值
            this.$watch('model', () => {
                this.model && this.form.setFieldsValue(pick(this.model, fields))
            })
          this.$watch('visible', (val) => {
            if (val) {
              this.queryParam = {
                idCar: this.model.idCar
              }
              this.$refs.table.refresh() // 刷新表格
            }
          })
        },
      computed: {
        rowSelection () {
          return {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      },
        mounted () {
        },
        methods: {
            handleSuccess (ret) {
                this.loading = false
                if (ret.code === 0) {
                    this.form.resetFields()
                    this.$emit('cancel')
                    this.$message.info(ret.msg)
                } else {
                    this.$message.error('res.msg')
                }
            }
        }
    }
</script>
